<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import AntdIcon from '@/components/AntdIcon/index.vue'
import Button from '@/components/Button.vue'
import Empty from '@/components/Empty.vue'
import { useCartStore } from '@/stores'
import { multiplication } from '@pureadmin/utils'
import { message } from 'ant-design-vue'
import { checkDiscountCodeApi } from '@/api'
const router = useRouter()
const discount_code = ref('')
const isChecked = ref(false)
const cartInfo = computed(() => useCartStore().cartInfo)

// 数量发生改变时
const numChange = (sku, num) => {
  const { editCart } = useCartStore()
  editCart(sku, num)
}

const nav = () => {
  if (cartInfo.value.list.length) {
    router.push({ name: 'confirmPay', query: { code: isChecked.value ? discount_code.value : '' } })
  } else {
    message.warning('Please select the game area and goods')
  }
}

// 删除商品
const delCartGoods = (sku) => {
  const { delCartGoods } = useCartStore()
  delCartGoods(sku)
}

// 校验优惠码
const checkCode = () => {
  if (!discount_code.value) {
    isChecked.value = false
    message.warning('Please enter the coupon code')
    return
  }
  checkDiscountCodeApi({ discount_code: discount_code.value }).then(() => {
    message.success('Coupon code verification successful')
    isChecked.value = true
  })
}

onMounted(() => {
  const { getCartList } = useCartStore()
  getCartList()
})
</script>
<template>
  <div>
    <div class="bg-gray-50" v-if="cartInfo.list.length">
      <div class="max-w-[1200px] mx-auto max-[1200px]:p-3">
        <!-- 商品列表 -->
        <div class="goods-list pb-5 pt-6">
          <!-- 标题 -->
          <div class="flex gap-4 justify-between items-center p-1 mb-1 pr-9">
            <div class="flex-1 text-right">Skin</div>
            <div class="min-w-[200px] flex justify-center max-[750px]:min-w-[0]">Price</div>
            <div class="min-w-[200px] flex justify-center max-[750px]:min-w-[0]">Quantity</div>
            <div>Total</div>
          </div>
          <!-- 商品 -->
          <div
            class="flex gap-4 justify-between bg-white items-center border border-[#ccc] p-1 mb-4"
            v-for="item in cartInfo.list"
            :key="'goods' + item"
          >
            <div class="flex-1 flex gap-3 max-[750px]:pl-0">
              <div class="size-15 max-[750px]:hidden">
                <img :src="item.img" class="w-full h-full object-cover" alt="" />
              </div>
              <div class="flex flex-col gap-1">
                <div class="font-bold text-2xl break-all max-[750px]:text-xl">
                  {{ item.name }}
                </div>
                <div class="break-all max-[750px]:text-[12px]">
                  {{ item.sku_title || item.spece_value_title }}
                </div>
              </div>
            </div>
            <div class="min-w-[200px] flex justify-center max-[750px]:min-w-[0]">
              ${{ item.price }}
            </div>
            <div class="min-w-[200px] flex justify-center max-[750px]:min-w-[0]">
              <a-select
                v-model:value="item.num"
                size="small"
                :bordered="false"
                @change="numChange(item.sku, $event)"
              >
                <a-select-option :value="num" v-for="num in item.stock">
                  {{ num }}
                </a-select-option>
              </a-select>
            </div>
            <div>${{ multiplication(item.price, item.num, 2) }}</div>
            <AntdIcon
              icon="CloseSquareOutlined"
              class="cursor-pointer"
              @click="delCartGoods(item.sku)"
            />
          </div>
        </div>
      </div>
      <div
        class="max-w-[1200px] mx-auto grid grid-cols-2 gap-5 pb-8 max-[750px]:grid-cols-1 max-[750px]:p-3"
      >
        <div class="min-h-[150px] bg-white border border-gray-300 p-4 relative">
          <div>COUPON</div>
          <div class="flex gap-2 w-[80%] absolute top-[50%] left-[50%] translate-[-50%]">
            <input
              type="text"
              class="w-full outline-0 border rounded-[5px] pl-3 pr-3"
              v-model="discount_code"
            />
            <Button @click="checkCode">APPLY</Button>
          </div>
        </div>
        <div class="flex flex-col gap-5 bg-white border border-gray-300 p-4">
          <div>SUMMARY</div>
          <div class="h-[1px] bg-black"></div>
          <div class="flex justify-between text-[14px] font-bold">
            <div>SUBTOTAL</div>
            <div>x{{ cartInfo.count }}</div>
          </div>
          <div class="flex justify-between text-2xl font-bold">
            <div>TOTAL</div>
            <div>${{ cartInfo.total }}</div>
          </div>
          <div class="h-[1px] bg-black"></div>
          <div class="flex justify-end">
            <Button bg="#f9a044" class="h-12" @click="nav">
              GO TO CHECKOUT
              <AntdIcon icon="ArrowRightOutlined" />
            </Button>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-gray-50 p-5 flex justify-center" v-else>
      <Empty :btn="true" tips="Your cart is empty..." />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.ant-select {
  border: 1px solid #333;
  min-width: 55px;
}
</style>
